<!--
//  -------------------------------------------------------------
//  author        Giga
//  project       qeeqbox/social-analyzer
//  email         gigaqeeq@gmail.com
//  description   app.py (CLI)
//  licensee      AGPL-3.0
//  -------------------------------------------------------------
//  contributors list qeeqbox/social-analyzer/graphs/contributors
//  -------------------------------------------------------------
-->

<html>
<meta charset="utf-8" />
<title>QeeqBox - Social Analyzer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.css" />
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #212222;
  }

  header {
    background-color: #2b2c2c;
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hide;
    box-shadow: 0 8px 5px rgba(0, 0, 0, .08);
  }

  a {
    color: #d0d0d0 !important;
  }

  .navbar {
    height: 50px;
    color: #d0d0d0 !important;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  body>* {
    font-family: monospace !important;
    font-size: 12px !important;
    line-height: normal;
    cursor: default !important;
    color: #d0d0d0 !important;
  }

  #selectable {
    vertical-align: top;
  }

  th {
    text-align: left;
    font-weight: normal !important;
    background-color: #383939 !important;
  }

  table {
    color: #d0d0d0 !important;
    font-size: 12px !important;
    margin-bottom: 20px;
    border: 0;
    box-shadow: none;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    width: 100%;
  }

  tr {
    border-bottom: 1px solid #3c3c3c;
  }

  tr:first-child {
    border-top: none;
  }

  tr:last-child {
    border-bottom: none;
  }

  #selectable .ui-selecting {
    background: #feca40;
  }

  #selectable .ui-selected {
    background: #aa6400;
    color: white;
  }

  #selectable ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
  }

  #selectable ul li {
    border: none;
    margin: 2px 2px 2px 2px;
  }

  .ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
  }

  #analyzed {
    display: none;
  }

  .center-dev {
    display: flex;
    margin-left: auto;
    margin-top: 50px;
    padding-top: 20px;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #aa6400 #272c2e;
    justify-content: center;
    width: 100%;
  }

  .string-analyzer-app {
    width: 95%;
  }

  .cell-separator {
    width: 15px;
  }

  .separator {
    height: 1px;
    margin-bottom: 20px;
    background-color: #3c3c3c;
    margin-top: 20px;
  }

  input[type="text"] {
    background-color: #383939 !important;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    border: none;
    height: 26px;
    padding: 3px 6px 3px 6px !important;
    color: #d0d0d0 !important;
    font-size: 12px;
  }

  input[type="button"] {
    border: 0;
    background-color: #383939 !important;
    box-shadow: none;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    color: #d0d0d0 !important;
    height: 26px;
    border: none;
    font-size: 12px;
  }

  .div-right1 {
    flex: 1;
    -webkit-box-shadow: inset 0px -1px 0px #3c3c3c inset;
    -moz-box-shadow: inset 0px -1px 0px #3c3c3c inset;
    box-shadow: 0px -1px 0px #3c3c3c inset;
    margin-left: 10px !important;
  }

  .div-right {
    flex: 1;
    margin-left: 10px !important;
  }

  .div-left {
    font-size: 16px;
    line-height: 16px;
  }


  .div-header {
    display: flex;
    height: 15px;
    color: #d0d0d0 !important;
    margin-bottom: 20px;
  }

  .div-100 {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }

  #analyzed-options li {
    display: inline-block;
    color: #d0d0d0 !important;
    height: 26px;
    line-height: 26px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .selectize-dropdown .optgroup {
    border-top: 1px solid #666666;
  }

  .optgroup-header {
    border: none !important;
    background-color: #383939 !important;
    color: #d0d0d0 !important;
    font-weight: bold;
    font-size: 14px !important;
  }

  #lookups-section,
  #possible-words-section,
  #combinations-section,
  #output-section-1,
  #output-section-2,
  #output-section-3,
  #output-section-4,
  #output-section-5,
  #logs-section,
  #most-common-words-section,
  #words-info-section,
  #custom-search-section,
  #names-origins-section {
    display: none;
  }

  #lookups-checking-info {
    text-align: left;
  }


  .navbar-nav {
    flex-direction: inherit !important;
  }

  .nav-item {
    font-size: 14px;
    padding-left: 15px;
  }

  #most-common-words-section table tr th:first-child,
  #most-common-words-section table tr td:first-child,
  #words-info-section table tr th:first-child,
  #words-info-section table tr td:first-child {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    word-break: break-word;
  }

  #words-info-section table tr th:nth-child(2),
  #words-info-section table tr td:nth-child(2) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    word-break: break-word;
  }

  #custom-search-section table tr th:first-child,
  #custom-search-section table tr td:first-child {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    word-break: break-word;
  }

  .box-border-style {
    background-color: #2b2c2c !important;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    border: none;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
  }

  .hex-spinner {
    width: 140px;
    height: 140px;
    animation: spinner 2s linear infinite;
  }

  @keyframes spinner {
    0% {
      stroke-dasharray: 0 0 80 300;
    }

    50% {
      stroke-dasharray: 0 80 160 300;
    }

    75% {
      stroke-dasharray: 0 160 220 300;
    }

    100% {
      stroke-dasharray: 80 220 300 300;
    }
  }

  .waiting {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: #212222;
    opacity: .9;
    display: none;
  }

  .waiting-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
  }

  input[type='checkbox'] {
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 5px;
    height: 5px;
    color: #c0c0c0;
    border: 1px solid #b4b4b4;
    border-radius: 2px !important;
    outline: none;
  }

  input[type='checkbox']:checked {
    position: relative;
  }

  input[type='checkbox']:checked:before {
    position: absolute;
    display: block;
    background: none #b4b4b4;
    content: '';
    height: 8px;
    width: 8px;
    left: 1px;
    top: 1px;
  }

  #detection-options,
  #google-api,
  #user-agent-api,
  #proxy-api {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

  #detection-options-list {
    list-style-type: none;
    max-height: 200px;
    text-align: left;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-y: auto;
  }

  #detection-options li {
    height: 20px;
    line-height: 20px;
  }

  #detection-options label {
    margin: 0;
    padding-left: 5px;
  }

  #detection-options-buttons {
    display: inline-flex;
    margin-top: 10px;
  }

  .search-result {
    list-style-type: none;
    font-size: 17px;
    padding: 5px;
  }

  .modal-header {
    border-bottom: 1px solid #3c3c3c;
  }

  .modal-content {
    background-color: #2b2c2c !important;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    border: none;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
  }

  .modal-footer {
    border-top: 1px solid #3c3c3c;
  }

  #google-api input,
  #user-agent-api input,
  #proxy-api input {
    width: 100%;
    margin-bottom: 10px !important;
  }

  .modal-body .div-right {
    flex: 1;
  }

  .modal-body .div-left {
    font-size: 14px;
    line-height: 14px;
  }

  .modal-body .div-header {
    display: flex;
    height: 15px;
    color: #d0d0d0 !important;
    margin-bottom: 10px;
  }

  .modal-dialog {
    height: calc(100vh - 100px) !important;
    display: flex;
  }

  .modal-content {
    margin: auto !important;
    height: fit-content !important;
  }

  .user-info-container {
    display: flex;
    max-height: 250px;
  }

  .user-info-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .user-info-container-right img {
    max-height: 210px;
    padding: 10px;
  }

  .user-info-container-right_temp img {
    filter: blur(5px);
  }

  .user-info-container-left {
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-color: #aa6400 #272c2e;
  }

  .user-info-container-left::-webkit-scrollbar {
    display: none;
  }

  .user-info-container {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3c3c3c;
  }

  .user-info-container:last-child {
    border-bottom: none;
  }

  .box-border-style-settings {
    background-color: transparent;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
    border: none;
    text-align: right;
    margin-bottom: 10px;
    font-size: 14px;
  }

  #string-section .div-right {
    text-align: right;
    font-size: 16px;
  }

  .selectize-control {
    position: static !important;
    background-color: #383939 !important;
    min-width: 300px;
  }

  .selectize-input {
    color: #d0d0d0 !important;
    padding: 0px;
    background-color: #383939 !important;
    border: none !important;
  }

  .selectize-dropdown {
    color: #d0d0d0 !important;
    background-color: #383939 !important;
    border: none !important;
  }

  .selectize-input .item {
    background-color: #aa6400;
  }

  .item {
    background: #aa6400 !important;
    color: #ffffff !important;
  }

  .selectize-input [data-value] {
    background-color: #111111;
    background-image: none !important;
    background-repeat: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
  }

  .selectize-control.multi .selectize-input>div {
    border: none !important;
  }

  .selectize-dropdown-content .active {
    background: #2196f3 !important;
    color: #ffffff !important;
  }

  .selectize-control.plugin-remove_button [data-value] .remove {
    border-left: none !important;
  }

  #output-table-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .profile-card {
    max-width: 320;
    float: left;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-card-text {
    padding: 10px;
    text-overflow: ellipsis;
  }

  .profile-card img {
    max-height: 210px;
    padding: 10px;
  }

  .logs {
    padding-top: 20px
  }

  .user-info-container-color-unknown {
    opacity: 0.4 !important;
  }

  .user-info-container-color-failed {
    opacity: 0.1 !important;
  }

  #div-right-icon {
    float: right;
    font-size: 16px;
  }

  #logs-section pre {
    color: #d0d0d0 !important;
    font-size: 12px !important;
    font-family: monospace !important;
  }
</style>

<body>

  <div class="waiting">
    <div class="waiting-box">
      <svg class="hex-spinner" viewBox="0 -5 100 110">
        <polygon stroke-width="7" stroke="#aa6400" fill-opacity="0" id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" />
      </svg>
      <div class="logs" id="logs">logsfsddsfsdf</div>
    </div>
  </div>

  <header>
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="#">Social Analyzer</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="https://github.com/qeeqbox/social-analyzer/stargazers"> <i class="fa fa-star"></i></a>
        </li>
        <li class="nav-item">
          <a href="https://github.com/qeeqbox/social-analyzer/archive/main.zip"> <i class="fa fa-download"></i></a>
        </li>
        <li class="nav-item">
          <a href="https://github.com/qeeqbox/social-analyzer/watchers"> <i class="fa fa-eye"></i></a>
        </li>
      </ul>
    </nav>
  </header>

  <div class="center-dev">
    <div class="string-analyzer-app">
      <div class="modal fade" id="settings-modal" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <div class="div-left">Settings</div>
              <div class="div-right"></div>
            </div>
            <div class="modal-body">
              <div id="user-agent-api">
                <div class="div-header">
                  <div class="div-left">User-Agent (Optional)</div>
                  <div class="div-right"></div>
                </div>
                <input type="text" id="user-agent-string" placeholder="Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0" />
              </div>
              <div id="proxy-api">
                <div class="div-header">
                  <div class="div-left">HTTP\HTTPS Proxy (Optional)</div>
                  <div class="div-right"></div>
                </div>
                <input type="text" id="proxy-string" placeholder="http://host:port" />
              </div>
              <div id="google-api">
                <div class="div-header">
                  <div class="div-left">Google API (Optional)</div>
                  <div class="div-right"></div>
                </div>
                <input type="text" id="google-api-key" placeholder="Google API Key" />
                <input type="text" id="google-api-cs" placeholder="Google API CS" />
              </div>
              <div id="detection-options">
                <div class="div-header">
                  <div class="div-left">Available websites</div>
                  <div class="div-right"></div>
                </div>
                <ul id="detection-options-list">
                  None
                </ul>
                <div id="detection-options-buttons">
                  <input type="button" id="settings-select-all" value="Select All" />
                  <div class="cell-separator"></div>
                  <input type="button" id='de-settings-select-all' value="De-Select All" />
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <input type="button" id="save-settings" value="Save" />
              <input type="button" value="Dismiss" data-dismiss="modal" />
            </div>
          </div>
        </div>
      </div>
      <div class="box-border-style" id="string-section">
        <div class="div-header">
          <div class="div-left">Enter Profile Name</div>
          <div class="div-right"><i id="open-settings" class="fa fa-cog"></i></div>
        </div>
        <div class="div-100" class="collapse show">
          <input type="text" id="string-to-analyze" placeholder="Joe" />
          <div class="cell-separator"></div>
          <select name="analyzed-options" placeholder="Choose some options..." id="analyzed-options" multiple="multiple">
            <optgroup label="Name Analysis">
              <option value="WordInfo">WordInfo</option>
              <option value="MostCommon">MostCommon</option>
              <option value="FindOrigins">FindOrigins</option>
            </optgroup>
            <optgroup label="Find Profiles">
              <option value="LookUps">LookUps</option>
              <option value="CustomSearch">CustomSearch</option>
              <option value="FindUserProfilesFast,GetUserProfilesFast">FindUserProfilesFast</option>
              <option value="FindUserProfilesSlow">FindUserProfilesSlow</option>
              <option value="FindUserProfilesSpecial">FindUserProfilesSpecial</option>
            </optgroup>
            <optgroup label="Show Profiles">
              <option value="ShowUserProfilesSlow">ShowUserProfilesSlow</option>
            </optgroup>
            <optgroup label="Extract">
              <option value="ExtractPatterns">ExtractPatterns</option>
              <option value="ExtractMetadata">ExtractMetadata</option>
            </optgroup>
            <optgroup label="Other options">
              <option value="FindNumbers">FindNumbers</option>
              <option value="FindSymbols">FindSymbols</option>
              <option value="ConvertNumbers">ConvertNumbers</option>
              <option value="SplitWordsByAlphabet">SplitWordsByAlphabet</option>
              <option value="SplitWordsByUpperCase">SplitWordsByUpperCase</option>
            </optgroup>
          </select>
          <div class="cell-separator"></div>
          <input type="button" id="analyze-normal" value="Analyze" />
          <div class="cell-separator"></div>
          <input type="button" id="clear-options" value="Clear" />
          <div class="cell-separator"></div>
          <input type="button" id="reset-everything" value="Reset" />
        </div>
      </div>
      <div class="box-border-style" id="lookups-section">
        <div class="div-header">
          <div class="div-left">String LookUps</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div class="div-100">
          <div id="lookups-checking-info" class="collapse show"></div>
        </div>
        <div id="lookups-table">
        </div>
      </div>
      <div class="box-border-style" id="most-common-words-section">
        <div class="div-header">
          <div class="div-left">Most common words by languages</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="most-common-words-table" class="collapse show">
        </div>
      </div>
      <div class="box-border-style" id="names-origins-section">
        <div class="div-header">
          <div class="div-left">Extracted names with orginis</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="names-origins-table" class="collapse show">
        </div>
      </div>
      <div class="box-border-style" id="words-info-section">
        <div class="div-header">
          <div class="div-left">Extracted words information </div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="words-info-tables" class="collapse show">
        </div>
      </div>
      <div class="box-border-style" id="custom-search-section">
        <div class="div-header">
          <div class="div-left">Custom Search</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="custom-search-table" class="collapse show">
        </div>
      </div>
      <div class="box-border-style" id="possible-words-section">
        <div class="div-header">
          <div class="div-left">Possible words for combinations</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="possible-words-section-table" class="collapse show"></div>
      </div>
      <div class="box-border-style" id="combinations-section">
        <div class="div-header">
          <div class="div-left">Save Report</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div class="div-100" class="collapse show">
          <input type="button" class="save-text" value="Save as (Text)" />
          <div class="cell-separator"></div>
          <input type="button" class="save-json" value="Save as (Json)" />
          <div class="cell-separator"></div>
          <input type="button" class="save-xml" value="Save as (XML)" />
        </div>
      </div>
      <div class="box-border-style" id="output-section-1">
        <div class="div-header">
          <div class="div-left">Profiles</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="output-table-1" class="collapse show"></div>
      </div>
      <div class="box-border-style" id="output-section-2">
        <div class="div-header">
          <div class="div-left">Detected Profiles (Advanced)</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="output-table-2" class="collapse show"></div>
      </div>
      <div class="box-border-style" id="output-section-3">
        <div class="div-header">
          <div class="div-left">Detected Profiles (Normal)</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="output-table-3" class="collapse show"></div>
      </div>
      <div class="box-border-style" id="output-section-4">
        <div class="div-header">
          <div class="div-left">All Profiles (Normal)</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-down"></i></div>
        </div>
        <div id="output-table-4" class="collapse show"></div>
      </div>
      <div class="box-border-style" id="logs-section">
        <div class="div-header">
          <div class="div-left">Logs</div>
          <div class="div-right"><i id="div-right-icon" class="fa fa-caret-right"></i></div>
        </div>
        <div id="logs-pre" class="collapse"></div>
      </div>
    </div>
  </div>
  <script>
    random_names = ["sophia", "liam", "riley", "jackson", "emma", "aiden", "ava", "elijah", "isabella", "grayson", "aria", "lucas", "aaliyah", "oliver", "amelia", "caden", "mia", "mateo", "layla", "muhammad", "zoe", "mason", "camilla", "carter",
      "charlotte", "jayden", "eliana", "ethan", "mila", "sebastian", "everly", "james", "luna", "michael", "avery", "benjamin", "evelyn", "logan", "harper", "leo", "lily", "luca", "ella", "alexander", "gianna", "levi", "chloe", "daniel", "adalyn",
      "josiah", "charlie", "henry", "isla", "jayce", "ellie", "julian", "leah", "jack", "nora", "ryan", "scarlett", "jacob", "maya", "asher", "abigail", "wyatt", "madison", "william", "aubrey", "owen", "emily", "gabriel", "kinsley", "miles",
      "elena", "lincoln", "paisley", "ezra", "madelyn", "isaiah", "aurora", "luke", "peyton", "cameron", "nova", "caleb", "emilia", "isaac", "hannah", "carson", "sarah", "samuel", "ariana", "colton", "penelope", "maverick", "lila", "matthew"
    ]

    //$("#string-to-analyze").attr("placeholder", random_names[(Math.random() * random_names.length) | 0]);
    $("#string-to-analyze").attr("placeholder", "johndoe");

    var interval_logs;

    $('#analyzed-options').selectize({
      plugins: ['remove_button'],
    });

    setup_selectable('#analyzed-options')

    function spinner_on_off(on_off) {
      if (on_off) {
        $('#logs').text("")
        $('.waiting').show();
        $('.waiting-box').show();
      } else {
        $('#logs').text("")
        $('.waiting').hide();
        $('.waiting-box').hide();
      }
    }

    function get_logs(uuid) {
      $.ajax({
        type: "POST",
        url: "/get_logs",
        data: {
          'last_line': $('#logs').text(),
          'uuid': uuid
        },
      }).done(function(data) {
        if (data != "nothinghere" && data != "") {
          $('#logs').text(data)
        }
      })
    }

    function reset_everything() {
      //$('#analyzed-options')[0].selectize.clear()
      $("#lookups-checking-info").html("");
      $("#lookups-table").html("");
      $('#lookups-section').hide();
      $("#most-common-words-table").html("")
      $('#most-common-words-section').hide();
      $("#words-info-tables").html("");
      $('#words-info-section').hide();
      $('#possible-words-section').hide();
      $('#possible-words-section-table').html("");
      $('#combinations-section').hide();
      $('#output-section-1').hide();
      $('#output-table-1').html("");
      $('#output-section-2').hide();
      $('#output-table-2').html("");
      $('#output-section-3').hide();
      $('#output-table-3').html("");
      $('#output-section-4').hide();
      $('#output-table-4').html("");
      $('#logs-section').hide();
      $('#logs-pre').html("");
      $('#names-origins-section').hide();
      $('#names-origins-table').html("");
      $('#custom-search-section').hide();
      $('#custom-search-table').html("");
      $('#logs').html("");
      clearInterval(interval_logs);
    }

    function setup_selectable(tag) {
      $(tag).selectable({
        selecting: function(event, ui) {
          if ($(ui.selecting).hasClass('ui-selected')) {
            this.del_selected.push(ui.selecting);
          }
        },
        unselecting: function(event, ui) {
          $(ui.unselecting).addClass('ui-selected');
        },
        stop: function() {
          $.each(this.del_selected, function(ix, de) {
            $(de).removeClass('ui-selecting').removeClass('ui-selected');
          });
          this.del_selected = [];
        }
      });
    }

    function add_extract(site) {
      var temp_extracted_all = '<div>Extracted: ' + "unavailable" + '</div>'
      var temp_metadata_all = '<div>Metadata: ' + "unavailable" + '</div>'
      try {
        if (site.extracted != "unavailable" && site.extracted != "") {
          temp_extracted_all = ""
          site.extracted.forEach(function(extracted, i) {
            var temp_extracted = ""
            Object.keys(extracted).forEach(function(key) {
              temp_extracted += key + ' : ' + extracted[key] + ' '
            });
            temp_extracted_all += '<div>Extracted ' + i + ': ' + temp_extracted + '</div>'
          });
        }
      } catch (err) {
        temp_extracted_all = '<div>Extracted: ' + "unavailable" + '</div>'
      }
      try {
        if (site.metadata != "unavailable" && site.metadata != "") {
          temp_metadata_all = ""
          site.metadata.forEach(function(extracted, i) {
            var temp_metadata = ""
            Object.keys(extracted).forEach(function(key) {
              temp_metadata += key + ' : ' + extracted[key] + ' '
            });
            temp_metadata_all += '<div>Metadata ' + i + ': ' + temp_metadata + '</div>'
          });
        }
      } catch (err) {
        temp_metadata_all = '<div>Metadata: ' + "unavailable" + '</div>'
      }

      return temp_extracted_all + temp_metadata_all
    }

    function add_table(items) {

      var temp_th = ""
      var temp_td = ""

      Object.keys(items).forEach(function(key) {
        if (items[key].length > 0) {
          temp_th += '<th>' + key + '</th>'
          temp_ul = ""
          items[key].forEach(function(item) {
            temp_ul += "<li>" + item + "</li>";
          });
          temp_td += '<td id="selectable"><ul id="' + key + '-prefix-search-box">' + temp_ul + '</ul></td>';

        }
      });

      if (temp_th != "" && temp_td != "") {
        $('#possible-words-section-table').html('<table><tr>' + temp_th + '</tr>' + '<tr>' + temp_td + '</tr>' + '</table>')
        $('#possible-words-section').show();
      }

    }

    async function analyze_string() {
      reset_everything()
      spinner_on_off(true)
      random_string = Math.random().toString(36).substring(2);
      interval_logs = setInterval(get_logs.bind(null, random_string), 1000);
      list_of_options = []
      $('.selectize-input .item').each(function() {
        list_of_options.push($(this).attr('data-value'))
      });

      await $.ajax({
        type: "POST",
        url: "/analyze_string",
        data: {
          'string': $('#string-to-analyze').val(),
          'option': list_of_options.join(","),
          'uuid': random_string
        },
      }).done(function(data) {
        if (data != "Error") {
          if (data.common.length > 0) {
            var temp_tr = ""
            Object.keys(data.common).forEach(function(item) {
              temp_tr += '<tr><td>' + data.common[item].word + '</td><td>' + data.common[item].languages + '</td></tr>'
            });

            $("#most-common-words-table").last().append('<table><tr><th>word</th><th>languages</th></tr>' + temp_tr + '</table>')
            $('#most-common-words-section').show();
          }
          if ((data.info.checking.indexOf('with no lookups') === -1)) {
            $("#lookups-checking-info").html(data.info.checking);
            if (data.info.items.length > 0) {
              var temp_tr = ""
              Object.keys(data.info.items).forEach(function(item) {
                temp_tr += '<tr><td>' + data.info.items[item].title + '</td><td>' + data.info.items[item].snippet + '</td></tr>'
              });
              $("#lookups-table").last().append('<table><tr><th>title</th><th>snippet</th></tr>' + temp_tr + '</table>')
              $('#lookups-table').show();
            }

            $('#lookups-section').show();
          }
          if (data.words_info.length > 0) {
            data.words_info.forEach(function(item) {
              var temp_tr = '<tr><td>' + item.word + '</td><td>definition</td><td>' + item.text + '</td></tr>'
              if (item.results.length > 0) {
                item.results.forEach(function(result) {
                  temp_tr += '<tr><td>' + item.word + '</td><td>' + result.type + '</td><td>' + result.text + '</td></tr>'
                });
              }
              $("#words-info-tables").last().append('<table><tr><th>word</th><th>type</th><th>text</th></tr>' + temp_tr + '</table>')
            });
            $('#words-info-section').show();
          }

          add_table(data.table)

          if (data.user_info_advanced.data.length > 0) {
            var temp_tr = ""
            if (data.user_info_advanced.type == "all" || data.user_info_advanced.type == "noshow") {
              data.user_info_advanced.data.forEach(function(site) {
                if (site.found > 0 || site.image != "") {
                  temp_image = ""
                  if (site.image != "") {
                    temp_image = '<img src=' + site.image + '>'
                  }
                  var temp_extract = add_extract(site);
                  temp_tr += '<div class="user-info-container"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Rate: ' + site.rate + '</div><div>Status: ' + site.status +
                    '</div><div>Title: ' + site.title +
                    '</div><div>Language: ' + site.language + '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div>' + temp_extract + '</div><div class="user-info-container-right">' + temp_image + '</div></div>'
                }
              });

              $("#output-table-2").html(temp_tr)
              $('#output-section-2').show();
            } else if (data.user_info_advanced.type == "show") {
              data.user_info_advanced.data.forEach(function(site) {
                if (site.found > 0 || site.image != "") {
                  temp_image = ""
                  if (site.image != "") {
                    temp_image = '<img src=' + site.image + '>'
                  }
                  temp_tr += '<div class="profile-card"><div class="profile-card-text">Link: <a href="' + site.link + '">' + site.link + '</a></div>' + temp_image + ' </div>'
                }
              });

              $("#output-table-1").html(temp_tr)
              $('#output-section-1').show();
            }
          }

          if (data.user_info_normal.data.length > 0) {
            var temp_tr = ""

            data.user_info_normal.data.forEach(function(site) {
              if (site.method == "all") {
                var temp_extract = ""
                if (site.good == "true") {
                  var temp_extract = add_extract(site);
                  temp_tr += '<div class="user-info-container"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Rate: ' + site.rate + '</div><div>Status: ' + site.status +
                    '</div><div>Title: ' + site.title +
                    '</div><div>Language: ' + site.language + '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div>' + temp_extract + '</div><div class="user-info-container-right"></div></div>'
                } else {
                  temp_tr += '<div class="user-info-container user-info-container-color-unknown"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Title: ' + site.title +
                    '</div><div>Language: ' + site.language + '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div></div><div class="user-info-container-right"></div></div>'
                }
              } else if (site.method == "find") {
                if (site.good == "true") {
                  var temp_extract = add_extract(site);
                  temp_tr += '<div class="user-info-container"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Rate: ' + site.rate + '</div><div>Status: ' + site.status +
                    '</div><div>Title: ' + site.title +
                    '</div><div>Language: ' + site.language + '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div>' + temp_extract + '</div><div class="user-info-container-right"></div></div>'
                }
              } else if (site.method == "get") {
                temp_tr += '<div class="user-info-container user-info-container-color-unknown"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Rate: ' + site.rate +
                  '</div><div>Status: ' + site.status + '</div><div>Title: ' + site.title +
                  '</div><div>Language: ' + site.language + '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div></div><div class="user-info-container-right"></div></div>'
              } else if (site.method == "failed") {
                temp_tr += '<div class="user-info-container user-info-container-color-failed"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link +
                  '</a></div></div><div class="user-info-container-right"></div></div>'
              }
            });

            $("#output-table-3").html(temp_tr)
            $('#output-section-3').show();
          }

          if (data.user_info_special.data.length > 0) {
            var temp_tr = ""
            data.user_info_special.data.forEach(function(site) {
              if (site.found > 0) {
                temp_image = ""
                temp_tr += '<div class="user-info-container"><div class="user-info-container-left"><div>Link: <a href="' + site.link + '">' + site.link + '</a></div><div>Rate: ' + site.rate + '</div><div>Status: ' + site.status +
                  '</div><div>Title: ' + site.title +
                  '</div><div>Description: ' + site.type + '</div><div>Text: ' + site.text + '</div></div><div class="user-info-container-right">' + temp_image + '</div></div>'
              }
            });

            $("#output-table-4").html(temp_tr)
            $('#output-section-4').show();
          }
          if (data.names_origins.length > 0) {
            var temp_tr = ""
            Object.keys(data.names_origins).forEach(function(item) {
              temp_tr += '<tr><td>' + data.names_origins[item].origin + '</td><td>' + data.names_origins[item].name + '</td><td>' + data.names_origins[item].matched + '</td><td>' + data.names_origins[item].similar + '</td><td>' + data
                .names_origins[item].gender + '</td></tr>'
            });
            $("#names-origins-table").last().append('<table><tr><th>origin</th><th>name</th><th>matched</th><th>similar</th><th>gender</th></tr>' + temp_tr + '</table>')
            $('#names-origins-section').show();
          }
          if (data.custom_search.length > 0) {
            var temp_tr = ""
            Object.keys(data.custom_search).forEach(function(item) {
              temp_tr += '<tr><td>' + data.custom_search[item].site + '</td><td><a href="' + data.custom_search[item].link + '">' + data.custom_search[item].link + '</a></td><td>' + data.custom_search[item].snippet + '</td></tr>'
            });
            $("#custom-search-table").last().append('<table><tr><th>site</th><th>link</th><th>snippet</th></tr>' + temp_tr + '</table>')
            $('#custom-search-section').show();
          }

          if (data.logs.length > 0) {
            $("#logs-pre").html('<pre>' + data.logs + '</pre>')
            $('#logs-section').show();
          }

        }
      });

      clearInterval(interval_logs);
      spinner_on_off(false)
    }

    async function settings_modal(option) {
      spinner_on_off(true)
      if (option == 'get_settings') {
        await $.ajax({
          type: "GET",
          url: "/get_settings"
        }).done(function(data) {
          if (data != "Error") {
            if (data.websites.length > 0) {
              var temp_tr = ""
              data.websites.forEach(function(site) {
                var temp_selected = ""
                if (site.selected == "true") {
                  temp_selected = "checked"
                }
                temp_tr += '<li><input type="checkbox" name=url_' + site.index + ' ' + temp_selected + '>' + '<label for=url_' + site.index + '>' + site.url + '</label></li>'
              });

              $("#detection-options-list").html(temp_tr)
            }
            $("#user-agent-string").val(data.user_agent)
            $("#google-api-key").val(data.google[0])
            $("#google-api-cs").val(data.google[1])
          }
        });
      } else if (option == 'save_settings') {
        temp_checked = []
        $("#detection-options-list :checked").each(function() {
          temp_checked.push(Number(this.name.substring('url_'.length)))
        });
        await $.ajax({
          type: "POST",
          url: "/save_settings",
          data: {
            'websites': temp_checked.join(","),
            'user_agent': $("#user-agent-string").val(),
            'proxy': $("#proxy-string").val(),
            'google_key': $("#google-api-key").val(),
            'google_cv': $("#google-api-cs").val()
          }
        }).done(function(data) {
          if (data != "Error") {}
        });
      }

      spinner_on_off(false)
    }

    $('#de-settings-select-all').click(function() {
      $('#detection-options-list input:checkbox').prop('checked', false);
    });

    $('#settings-select-all').click(function() {
      $('#detection-options-list input:checkbox').prop('checked', true);
    });

    $('#analyze-normal').click(function() {
      analyze_string();
    });

    $('.generate').click(function() {
      generate_combinations('Generate');
    });

    $('#reset-everything').click(function() {
      reset_everything();
    });

    $('#save-settings').click(function() {
      settings_modal("save_settings")
      $("#settings-modal").modal("toggle")
    });

    $('#open-settings').click(function() {
      settings_modal("get_settings")
      $("#settings-modal").modal();
    });

    $('#clear-options').click(function() {
      $('#analyzed-options')[0].selectize.clear()
    });

    $(function() {
      $('.div-header').click(function() {
        if (this.innerText != "Enter Profile Name") {
          if ($(this).next().hasClass('show')) {
            $(this).find('#div-right-icon').removeClass("fa-caret-down")
            $(this).find('#div-right-icon').addClass("fa-caret-right")
          } else {
            $(this).find('#div-right-icon').removeClass("fa-caret-right")
            $(this).find('#div-right-icon').addClass("fa-caret-down")
          }
          $(this).next().collapse('toggle');
        }
      });
    });
  </script>
</body>

</html>
